<template>
	<el-dialog v-model="state.open" width="860" title="列设置" :close-on-click-modal="false" @close="closeDialog">
		<div class="flex">
			<div style="width: 600px">
				<div class="info-filled">
					<el-icon><InfoFilled /></el-icon>勾选您想要展示的列字段，以后将默认按照您的配置展示
				</div>
				<div style="color: #000; font-weight: 600">主信息</div>

				<template v-for="i in state.mainInfoList">
					<el-checkbox style="width: 140px" v-model="i.checked" :label="i.name" :disabled="i.disabled">
						{{ i.name }}
						<el-tooltip v-if="i.ext" :content="i.ext" placement="top">
							<el-icon class="ml5 tip">
								<Warning />
							</el-icon>
						</el-tooltip>
					</el-checkbox>
				</template>

				<!--  -->
				<div style="color: #000; font-weight: 600">明细信息</div>
				<!-- <div>字段信息 <el-button link type="primary" @click="selectAll">{{ state.selectAll ? '取消全选' : '全选' }}</el-button></div> -->
				<div>
					<el-checkbox-group v-model="state.checkNameList" @change="changeSelect">
						<template v-for="i in state.allList">
							<el-checkbox style="width: 140px" :label="i.name" :disabled="i.disabled">
								{{ i.name }}
								<el-tooltip v-if="i.ext" :content="i.ext" placement="top">
									<el-icon class="ml5 tip">
										<Warning />
									</el-icon>
								</el-tooltip>
							</el-checkbox>
						</template>
					</el-checkbox-group>
				</div>
			</div>
			<div class="pl10" style="width: 280px; border-left: 1px solid #eee">
				<SortableList :list="state.checkList" @sort="changeSort" @deleteItem="deleteItem" @setTopping="setTopping" v-if="state.open" />
			</div>
		</div>
		<template #footer>
			<div class="dialog-footer">
				<div>
					<el-button @click="formatBack">恢复默认</el-button>
				</div>
				<div>
					<el-button @click="closeDialog">取消</el-button>
					<el-button class="ml10" type="primary" @click="confirm">保存</el-button>
				</div>
			</div>
		</template>
	</el-dialog>
</template>

<script setup lang="ts" name="exportDialog">
import SortableList from './sortable.vue';
import { Local } from '/@/utils/storage';

const emit = defineEmits(['update:modelValue', 'changeColumn']);

const state = reactive({
	columns: [],
	open: false,
	checkList: [],
	checkNameList: [],
	submitList: [],
	allList: [],
	selectAll: false,

	mainInfoList: [],
});

const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false,
	},
	query: {
		type: Object,
		default: () => {},
	},
	list: {
		type: Array,
		default: () => [],
	},
	mainInfo: {
		type: Array,
		default: () => [],
	},
	allList: {
		type: Array,
		default: () => [],
	},
	commitName: {
		type: String,
		default: '',
	},
});

const formatData = () => {
	const locallist = props.list;
	if (locallist) {
		state.checkList = [...locallist];
		state.submitList = [...locallist];
		state.checkNameList = locallist.map((i) => i.name);
		state.allList = state.columns.map((item) => {
			return Object.assign({ checked: state.checkNameList.includes(item.name) }, item);
		});
		if (state.checkNameList.length == state.allList.length) {
			state.selectAll = true;
		}
	} else {
		state.selectAll = false;
		formatBack();
	}
};
const formatDataMaincolumns = () => {
	const mainLocalObj = JSON.parse(JSON.stringify(props.mainInfo));
	if (mainLocalObj) {
		state.mainInfoList = mainLocalObj;
	}
};
const closeDialog = () => {
	state.open = false;
	emit('update:modelValue', state.open);
};

const formatBack = () => {
	formatDataMaincolumns();
	state.checkList = [];
	state.submitList = [];
	state.checkNameList = [];
	state.allList = state.columns.map((item) => {
		if (item.defaultChecked) {
			state.checkList.push(item);
			state.submitList.push(item);
			state.checkNameList.push(item.name);
		}
		return Object.assign({ checked: item.defaultChecked }, item);
	});

	state.mainInfoList.forEach((item) => {
		item.checked = item.defaultChecked;
	});
};

const changeSort = (data) => {
	state.submitList = [...data];
};
const confirm = () => {
	Local.set(props.commitName, state.submitList);
	Local.set('mainInfo', state.mainInfoList);

	emit('changeColumn', state.submitList, state.mainInfoList);
	state.open = false;
};

const selectAll = () => {
	state.selectAll = !state.selectAll;
	state.checkList = [];
	state.checkNameList = [];
	if (state.selectAll) {
		state.allList = state.columns.map((item) => {
			state.checkList.push(item);
			state.checkNameList.push(item.name);
			if (state.submitList.filter((i) => i.name == item.name).length == 0) {
				state.submitList.push(item);
			}
			return Object.assign({ checked: true }, item);
		});
	} else {
		state.submitList = [];
		state.allList = state.columns.map((item) => {
			if (item.disabled) {
				state.checkList.push(item);
				state.submitList.push(item);
				state.checkNameList.push(item.name);
			}
			return Object.assign({ checked: item.disabled }, item);
		});
	}
};

const changeSelect = (val) => {
	if (val.length > state.checkList.length) {
		const changeData = val[val.length - 1];
		const item = state.columns.filter((i) => i.name == changeData)[0];
		state.submitList.push(item);
		state.checkList.push(item);
	} else {
		let temp = [];
		state.submitList.forEach((i) => {
			if (val.includes(i.name)) {
				temp.push(i);
			}
		});

		state.submitList = [...temp];

		state.checkList = [...temp];
	}
};

const deleteItem = (data) => {
	state.checkList = state.checkList.filter((i) => i.name != data.name);
	state.submitList = state.submitList.filter((i) => i.name != data.name);
	state.checkNameList = state.checkList.map((i) => i.name);
};
const setTopping = (data: any) => {
	state.checkList = state.checkList.filter((i) => i.name != data.name);
	for (let i = 0; i < state.checkList.length; i++) {
		if (!state.checkList[i].fixed) {
			state.checkList.splice(i, 0, data);
			state.submitList = state.checkList;
			state.checkNameList = state.checkList.map((i) => i.name);
			return;
		}
	}
};
const openDialog = () => {
	state.open = true;
	state.columns = props.allList;
	formatData();
	formatDataMaincolumns();
};

defineExpose({
	openDialog,
});
</script>

<style lang="scss">
.dialog-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.exportTips {
	margin-bottom: 10px;
}

.firlayout {
	padding: 0 16px 0;
	margin-bottom: 20px;

	.checklayout {
		padding: 2px 10px;

		> label {
			width: 120px;
		}
	}
}

.info-filled {
	padding: 10px;
	list-style: disc;
	border: 1px solid rgba(0, 91, 245, 0.2);
	background: #e5eefd;
	border-radius: 4px;
	font-size: 12px;
	color: #000;
	margin-right: 10px;
	margin-bottom: 10px;
	display: flex;
	gap: 6px;
	align-items: center;
}
</style>


